<template>
    <div class="side-bar">
       <el-menu class="menu" default-active="0">
            <el-menu-item v-for="(item, index) in menu"
                :key='index'
                @click.native="changeRoute(item.path)" :index="index + ''">
                <img :src="require(`./images/${item.icon}.png`)" class="icon">
                <span class="item_title">{{$t(item.name)}}</span>  
            </el-menu-item>
       </el-menu>
    </div>
</template>

<script>
export default {
    name: 'sideBar',
    data () {
        return {

        }
    },
    computed:{
        menu(){
            return [
            {
                name: 'sideBar.wallet',
                icon: 'icon_wallet',
                path: '/o-wallet-list'
            },
            {
                name: 'sideBar.validatorNode',
                icon: 'icon_vote',
                path: '/validator-node',
            },
            {
                name: this.$t('sideBar.setting'),
                icon: 'icon_Shape',
                path: '/setting'
            }]
        }
    },
    methods: {
        changeRoute(path) {
            this.$router.push(path);
        }
    }
}
</script>

<style lang="less" scoped>
    .side-bar{
        width: 100%;
        .menu{
            border-right: 0 none;
        }
        .icon{
            width:14px;
            height:14px;
            display: inline-block;
            margin-right:20px;
        }
        .item_title{
            display:inline-block;
            height:44px;
            line-height: 44px;
            color:#fff;
        }
    }
</style>
<style lang="less">
.side-bar{
    .el-menu{
        background:transparent;
        .el-menu-item{
            height: 44px;
            line-height: 44px;
            font-size: 12px;
            color:#fff;
            border-left: 2px solid transparent;
            outline: 0 none;
            &:hover{
                background: #17265E;
            }
            &.is-active {
                color: #fff;
                background: #17265E;
                border-left: 2px solid #32C5DD;
            }
        }
    }
}
</style>
